<template>
   <div>
        <!-- 动态 -->
        <div class="dynamic flex"  ref="content">
             <div v-html="ArticleDetail.content" class="content"></div>
             <SlideShow  id="SlideShow" :image="ArticleDetail.image"  v-if="ArticleDetail.image"/>
        </div>  
   </div>
</template>
<script>
import SlideShow from '@/components/Nouse/SlideShow.vue';
import { mapMutations, mapState } from 'vuex'
  export default 
  {
  components: { SlideShow },
     name :'', 
     computed:{
        ...mapState('ArticleDetail',['ArticleDetail']) //文章详情
     },
     methods:{
        ...mapMutations('ArticleDetail',['SETARTICLEDETAILCATALOG']),
        getImageClass(length){
           if(length<=1)  return 'one';
           if(length<=4) return 'two'
           return 'more'
        },
        getPosition(){
          let data = []
          let top=  this.$refs.content.offsetTop  
          let label= "内容"
          data.push({top,label})
          top =top +this.$refs.content.clientHeight
          label= "评论"
          data.push({top,label})
          this.SETARTICLEDETAILCATALOG(data)
        }
     },
     mounted(){
       this.getPosition()
     }
  }
</script>
<style scoped lang='less'>

// 动态
.dynamic{
    width: 100%;
    margin: 10px 0;

    .content{
        width: 100%;
        text-align: left;
        font-size: 20px;
        color: var(--fontColor);
    }

}
#SlideShow{
     width: 100%;
     height: 400px;
     margin: 10px 0;
     border-radius: 5px;
     overflow: hidden;
     z-index: 0;
}

</style>